<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no,minimal-ui">
  <title>蜜雪冰城</title>
  <link rel="icon" href="../../back/images/icons/蜜雪logo.svg">
  <!--不同屏幕尺寸根字体设置-->
  <script src="../js/base.js"></script>
  <!--element-ui的样式-->
  <link rel="stylesheet" href="../../back/plugins/element-ui/index.css" />
  <!--引入vant样式-->
  <link rel="stylesheet" href="../styles/vant.min.css"/>
  <!-- 引入样式  -->
  <link rel="stylesheet" href="../styles/index.css" />
  <!--本页面内容的样式-->
  <link rel="stylesheet" href="../styles/main.css" />

</head>
<body>
<div id="main" class="app">
    <h1 style="border-bottom: 1px #bababa solid;height: 40rem;background-color: white;width: 100%;font-size: 18rem;line-height: 40rem;text-align: center">聊天</h1>

    <div class="divMenu">
        <div>
            <div class="divItem" v-for="(item,index) in userList" :key="index" @click="dishDetails(item)" style="background-color: white;
    margin-top: 10rem;
   padding: 7rem 12rem 4rem 12rem;">
                <el-image :src="imgPathConvert(item.image)" style="width: 55rem;height: 55rem;border-radius: 55rem">
                </el-image>
                <div style="    width: 281rem;
    float: right;">
                    <div class="divName" style="font-size: 18rem;width: 174rem;display: inline-block">{{item.name}}</div>
                    <div class="divName" style="    width: 58rem;
    font-size: 12rem;
    float: right;
    color: #979797;">{{item.data}}</div>
                    <div class="divDesc" style="    margin-top: 8rem;
    font-size: 11rem;
    color: #939393;">{{item.message}}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../back/plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../back/plugins/element-ui/index.js"></script>
<!-- 引入vant样式 -->
<script src="../js/vant.min.js"></script>
<!-- 引入axios -->
<script src="../../back/plugins/axios/axios.min.js"></script>
<script src="../js/request.js"></script>
<script src="../js/common.js"></script>
<script src="../api/main.js"></script>
</body>
<script>
  new Vue({
    el:'#main',
    data(){
      return {
        userList:[],
      }
    },

    created(){
    },

    mounted(){
      this.initData()

    },
    methods:{
      //初始化数据
      initData() {
        //  中秋赏月又品戏,余音绕梁曲韵新。 佳节观花复看景,歌声袅袅月辉清
        this.userList=[{"name":"今日福利","message":"今日奶茶买一送一，仅限今日","image":"gift.jpg","data":"22/5/20"},
            {"name":"貂蝉","message":"中秋赏月又品戏,余音绕梁曲韵新。 佳节观花复看景 · · ·","image":"diaochan.jpg","data":"22/5/20"},
            {"name":"吕布","message":" 水绕彭城楼,山围戏马台。 古来豪杰地,千岁有余哀","image":"lvbu.jpg","data":"22/5/19"}]

      },
      //网络图片路径转换
      imgPathConvert(path){
        return imgPath(path)
      },
      //跳转到去结算界面
      toAddOrderPage(){
        if(this.cartData.length > 0){
          window.requestAnimationFrame(()=>{
            window.location.href ='/front/page/add-order.html'
          })
        }
      },




    }
  })
</script>
</html>
